<template>
  <div class="tinymce-container editor-container">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
    <div class="editor-custom-btn-container">
      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onActivated } from 'vue'
import editorImage from './components/editorImage.vue'
// import '@/static/tinymce4.7.5/langs/zh_CN'
import { ref, watch, onMounted, onBeforeUnmount, defineOptions, defineProps, nextTick } from 'vue'

const plugins = [
  `advlist anchor autolink autosave code codesample colorpicker colorpicker
  contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
  legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`,
]
const toolbar = [
  `bold italic underline strikethrough alignleft aligncenter
  alignright outdent indent  blockquote undo redo removeformat code`,
  `hr bullist numlist link image charmap	 preview anchor pagebreak
    fullscreen insertdatetime media table forecolor backcolor`,
]
defineOptions({
  name: 'Tinymce',
})
const props = defineProps({
  id: {
    type: String,
  },
  value: {
    type: String,
    default: '',
  },
  toolbar: {
    type: Array,
    required: false,
    default() {
      return []
    },
  },
  menubar: {
    default: 'file edit insert view format table',
  },
  height: {
    type: Number,
    required: false,
    default: 360,
  },
  width: {
    type: Number,
    required: false,
    default: 720,
  },
})
const hasChange = ref(false)
const hasInit = ref(false)
const tinymceId = ref(props.id || 'vue-tinymce-' + +new Date())
watch(
  () => props.value,
  (val) => {
    if (!hasChange.value && hasInit.value) {
      nextTick(() => window.tinymce.get(tinymceId.value).setContent(val))
    }
  }
)
onMounted(() => {
  initTinymce()
})
onBeforeUnmount(() => {
  destroyTinymce()
})
onActivated(() => {
  initTinymce()
})
function initTinymce() {
  window.tinymce.init({
    selector: `#${tinymceId.value}`,
    width: props.width,
    height: props.height,
    language: 'zh_CN',
    body_class: 'panel-body ',
    object_resizing: false,
    toolbar: props.toolbar.length > 0 ? props.toolbar : toolbar,
    menubar: false,
    plugins: plugins,
    end_container_on_empty_block: true,
    powerpaste_word_import: 'clean',
    code_dialog_height: 450,
    code_dialog_width: 1000,
    advlist_bullet_styles: 'square',
    advlist_number_styles: 'default',
    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
    default_link_target: '_blank',
    link_title: false,
    init_instance_callback: (editor) => {
      if (props.value) {
        editor.setContent(props.value)
      }
      props.hasInit = true
      editor.on('NodeChange Change KeyUp SetContent', () => {
        hasChange.value = true
        emit('input', editor.getContent())
      })
    },
  })
}
function destroyTinymce() {
  if (window.tinymce.get(tinymceId.value)) {
    window.tinymce.get(tinymceId.value).destroy()
  }
}
function setContent(value) {
  window.tinymce.get(tinymceId.value).setContent(value)
}
function getContent() {
  window.tinymce.get(tinymceId.value).getContent()
}
function imageSuccessCBK(arr) {
  arr.forEach((v) => {
    window.tinymce.get(tinymceId.value).insertContent(`<img class="wscnph" src="${v.url}" >`)
  })
}
</script>

<style scoped>
.tinymce-container {
  position: relative;
}

.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 10px;
  top: 2px;
  /*z-index: 2005;*/
}

.editor-upload-btn {
  display: inline-block;
}
</style>
